<template>
  <div>
    <el-drawer
      title="高级筛选"
      :visible.sync="dialog"
      size="600px"
      direction="rtl"
    >
      <div class="pr-4">
        <el-form ref="form" :model="form" label-width="80px" class="grid grid-cols-2">
          <el-form-item label="搜索查询" class="px-2">
            <el-input v-model="form.keyword" placeholder="搜索关键词" />
          </el-form-item>
          <el-form-item label="客户标签" class="px-2">
            <el-select
              v-model="form.tag_name"
              placeholder="请选择客户标签"
              class="w-full"
            >
              <el-option
                v-for="(item, index) in getCustomerValue('config_customer_tag')"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="客户来源" class="px-2">
            <el-select
              v-model="form.source"
              placeholder="请选择客户来源"
              class="w-full"
            >
              <el-option
                v-for="(item, index) in getCustomerValue('config_customer_source')"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="安全等级" class="px-2">
            <el-select
              v-model="form.safe_level"
              placeholder="请选择安全等级"
              class="w-full"
            >
              <el-option
                v-for="(item, index) in getCustomerValue('config_safe_level')"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="维护人员" class="px-2">
            <el-input v-model="form.tag_name" placeholder="维护人员" />
          </el-form-item>
          <el-form-item label="创建时间" class="px-2">
            <el-date-picker
              v-model="form.created_at"
              value-format="yyyy-MM-dd"
              type="date"
              class="w-full"
              placeholder="选择创建时间"
            />
          </el-form-item>
        </el-form>
        <div class="flex justify-center">
          <el-button type="primary" icon="el-icon-search" class="mt-4" @click="submit">查询</el-button>
          <el-button class="mt-4 ml-4" icon="el-icon-refresh-right" @click="refresh">重置</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Filterx",

  data() {
    return {
      dialog: false,
      form: {
        keyword: "",
        tag_name: "",
        source: "",
        safe_level: "",
        created_at: ""
      }
    };
  },

  computed: {
    ...mapGetters(["config_customer"])
  },

  mounted() {},

  methods: {
    submit() {
      this.$emit("submitFilter", this.form);
      this.dialog = false;
    },

    refresh() {
      this.form = {
        keyword: "",
        tag_name: "",
        source: "",
        safe_level: "",
        created_at: ""
      };

      this.$emit("submitFilter", this.form);
      this.dialog = false;
    },

    getCustomerValue(code) {
      if (this.config_customer.length) {
        return this.config_customer.find((e) => e.code === code).value;
      }

      return [];
    }
  }
};
</script>
